<template>
    <div class="radiotimelist">
        <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
        <div class="list">
            <div class="list-item space-between padding-24 bg-f" v-for="(item,index) in timelist" :key="index">
                <div class="left" :class="{red:index<=2}">{{index+1}}</div>
                <div class="right space-between">
                    <img :src="item.program_cover" alt="" class="lefts">
                    <div class="rights space-between">
                        <div class="flex-column">
                            <p class="fs-32 overFlow">{{item.program_name}}</p>
                            
                            <div class="center-col">
                                <img :src="item.user_avator" alt="" class="yuan">
                                <p class="fs-22 ">{{item.nickname}}</p>
                                <img :src="fire" alt="" class="fire">
                                <p class="fs-22">{{item.view_number}}</p>
                            </div>
                        </div>
                        <div class="play">
                            <img :src="playing" alt="" v-if="item.isplay==1">
                            <img :src="noplay" alt="" v-else>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center" v-if="timelist[0]">-- END --</div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'24小时榜',
            playing:require('../../assets/index/playing.png'),
            noplay:require('../../assets/index/playradio.png'),
            fire:require('../../assets/mine/fire.png'),
            timelist:[]
        }
    },
    created(){
        this.gettwentyFourHourList()
    },
    methods:{
        gettwentyFourHourList(){
            var url = this.$host1 + `home/radio/twentyFourHourList`;
            this.$axios.get(url,{
                params:{
                    type:2
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    // this.newranklist=resData
                    
                    if (resData.code == 200) {
                        this.timelist=resData.data
                    }else{
                        this.timelist=[]
                        this.AlertWin(resData.message);
                    }
                }
            }).catch(() => {
                this.timelist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
    }
}
</script>
<style lang="scss">
.radiotimelist{
    .list{
        margin-top: 1rem;
        height: auto;
        .list-item{
            height: 1.75rem;
            width: 100%;
            border-bottom: 0.01rem solid #e9e9e9;
            .left{
                text-align: center;
                //background-color: greenyellow;
                font-weight: bold;
                width: 0.8rem;
                font-size: 0.55rem;
            }
            .red{
                color: #F44349;
            }
            .right{
                width: calc(100% - 1rem);
                height: 100%;
                //background-color: blue;
                .lefts{
                    width: 1.5rem;
                    height: 1.5rem;
                    border-radius: 0.22rem;
                    object-fit: cover;
                }
                .rights{
                    height: 1.3rem;
                    width: calc(100% - 1.8rem);
                    //background-color: greenyellow;
                    .flex-column{
                        height: 100%;
                        .overFlow{
                            //background-color: #F44349;
                            width: 3.5rem;
                        }
                    }
                    .yuan{
                        width: 0.56rem;
                        height: 0.56rem;
                        margin-right: 0.2rem;
                    }
                    .fire{
                        width: 0.32rem;
                        height: 0.35rem;
                        margin-left: 0.3rem;
                        margin-right: 0.2rem;
                    }
                    .fires{
                        width: 0.32rem;
                        height: 0.35rem;
                        margin-right: 0.2rem;
                    }
                    .play{
                        img{
                            width: 0.44rem;
                            height: 0.44rem;
                        }
                    }
                }
            }
        }
        .list-item:last-child{
            border-bottom: none;
        }
        .center{
            height: 1rem;
        }
    }
}
</style>